<script>
// setup
// 1.执行时机，比beforeCreate还要早
// 2.setup函数中，获取不到this (this是undefined)
// 3.数据和函数，需要在 setup 最后 return ，才能在模板中应用
// 问题： 每次都要return ，好麻烦，怎样改善？
// 4. 通过语法糖解决问题
 export default {
  setup() {
    // console.log('setup函数')
    
    // 数据
    const message = 'hello 世界 vue3'

    // 函数
    const logMessage = () => {
      console.log(message)
    }

    return {
      message,
      logMessage
    }
  },
  beforeCreate () {
  console.log('beforeCreate函数')
  }
 }
</script>

<!-- <script setup>
  const message = 'this is a message'
  const logMessage = () => {
  console.log(message)
}
</script> -->

<!-- <script setup>
  // 1.reactive：接收一个对象类型的数据，返回一个响应式的对象
      // 如果是简单类型咋办嘞？
      // import { reactive } from 'vue'
      // const state = reactive({
      //   count: 100
      // })
      // const setCount = () => {
      //   state.count++
      // }
      
      // 2.ref(): 接收简单类型 或 复杂类型 ，返回一个     响应式的对象
      // 本质： 是在原有传入数据的基础上，外层包了一层      对象，包成了复杂类型，再借助reactive 实现的响应     式
      // 注意点:
      // 1.访问数据，需要通过 .value
      // 2. 但是在template中，.value不需要加(帮我们扒     了一层)        
      
      //推荐： 统一用ref()
      
      import { ref } from 'vue'
      const count = ref(0)
      // console.log(count.value)
      const setCount = () => {
        count.value++
      }

</script> -->

<!-- <template>
   <div> {{message}}</div>
  <button @click="logMessage">按button>       -->
  <!-- <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">+1</button>
  </div> -->
  <!-- <div>
    <div>{{ count }}</div>
    <button @click="setCount">+1</button>
  </div> -->

<!-- </template> 

<script setup>
import { ref,computed } from 'vue'
const list = ref([1,2,3,4,5,6,7,8,9])
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})

const addFn = () => {
  list.value.push(555)
}
</script> -->

<template>
<div>
  <div>原始数据： {{ list }}</div>
  <div>计算后的数据： {{ computedList }}</div>
  <button @click="addFn">修改</button>
</div>
</template>
<style>
</style> 